<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../s/vue/2.7.16/vue.min.js"></script>
</head>
<body oncontextmenu="return false;">
	<h3>自定义指令</h3>

	<hr>

	<div id="hook-arguments-example" v-demo:hello.a.b="{v:value}"></div>

	<script>
		Vue.directive('demo', {
			bind : function(el, binding, vnode, oldVnode) {
				var s = JSON.stringify
				el.innerHTML = //
				'this: ' + this + '<br>' + //
				'name: ' + s(binding.name) + '<br>' + //
				'value: ' + s(binding.value) + '<br>' + //
				'expression: ' + s(binding.expression) + '<br>' + //
				'argument: ' + s(binding.arg) + '<br>' + //
				'modifiers: ' + s(binding.modifiers) + '<br>' + //
				'vnode keys: ' + Object.keys(vnode).join(', ');//
			},

		})
		new Vue({
			el : '#hook-arguments-example',
			data : {
				value : [ 'hello', 'world' ]
			}
		})
	</script>

</body>
</html>